import React from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import {Button} from '@rneui/base';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
const NativeStack = createNativeStackNavigator();
import {createDrawerNavigator} from '@react-navigation/drawer';
const DrawerStack = createDrawerNavigator();

import {Drawer} from 'react-native-drawer-layout';
import {useMount, useSafeState} from 'ahooks';

import {useSelector, useDispatch} from 'react-redux';
import {
  setPageBackgroundColor,
  setHeaderBackgroundColor,
  setContentBackgroundColor,
} from '@/store';
import MainNav from './MainNav';
import routers from './routers';
import ToggleDrawer from './ToggleDrawer';

const rPPath = 'OPlayer';
const pageMap = new Map();
routers.forEach(([, [, pages = []]]) => {
  pages.forEach(([pageKey, ...other]) => {
    pageMap.set(pageKey, other);
  });
});

import Layout1 from './Layout1';

const App = props => {
  const {leftNavIsOpen, setLeftNavIsOpen} = props;
  const toggleDrawerProps = {
    leftNavIsOpen,
    setLeftNavIsOpen,
  };

  const dispatch = useDispatch();
  const pageBackgroundColor = useSelector(
    state => state.pageBackgroundColor.value,
  );
  const headerBackgroundColor = useSelector(
    state => state.headerBackgroundColor.value,
  );
  const contentBackgroundColor = useSelector(
    state => state.contentBackgroundColor.value,
  );

  useMount(() => {
    dispatch(setPageBackgroundColor('#F9F9F9'));
    dispatch(setHeaderBackgroundColor('#F9F9F9'));
    dispatch(setContentBackgroundColor('#FFF'));
  });

  return (
    <NativeStack.Navigator
      screenOptions={{
        headerShown: false,
        animation: 'fade',
        headerLeft: p => <ToggleDrawer {...toggleDrawerProps} />,
        headerTitleAlign: 'center',
        headerStyle: {
          backgroundColor: headerBackgroundColor,
        },
        contentStyle: {
          backgroundColor: contentBackgroundColor,
        },
      }}>
      {[...pageMap].map(([key, [com, name, , config = {}]]) => {
        const options = {
          ...config?.options,
          title: name,
        };
        return (
          <NativeStack.Screen
            key={key}
            name={`${rPPath}/${key}`}
            options={{
              ...options,
              headerShown: false,
            }}>
            {p => (
              <Layout1 {...p} {...toggleDrawerProps} pageName={name} options={options}>
                {com}
              </Layout1>
            )}
          </NativeStack.Screen>
        );
      })}
    </NativeStack.Navigator>
  );
};
export default ({}) => {
  const [leftNavIsOpen, setLeftNavIsOpen] = useSafeState(false);
  const toggleDrawerProps = {
    leftNavIsOpen,
    setLeftNavIsOpen,
  };
  return (
    <>
      <Drawer
        open={leftNavIsOpen}
        onOpen={() => setLeftNavIsOpen(true)}
        onClose={() => setLeftNavIsOpen(false)}
        drawerStyle={{
          width: 305,
        }}
        drawerType="front"
        renderDrawerContent={() => <MainNav {...toggleDrawerProps} />}>
        <App {...toggleDrawerProps} />
      </Drawer>
    </>
  );
};
